<template>
    <view class="search">
        <!-- <image class="background-top" :src="imgUrl() + 'search_top_back.png'" mode="widthFix"></image> -->
        <view class="search-nav">
            <search-top-nav @menuChange="menu" @searchKey="searchEvent"></search-top-nav>
        </view>
        <scroll-view class="search-scroll" scroll-y @scrolltolower="reachBottom">
            <!-- <u-button>还是从这里开始写表</u-button> -->
            <view class="search-content" v-if="typeIndex == 0">
                <block v-for="(item, index) in searchLIst" :key="index">
                    <view @click="goToFoodDetail(item)" class="search-item">
                        <view class="search-left"
                            ><u--image width="80rpx" height="80rpx" :src="item.coverAbsolute" mode=""></u--image
                        ></view>
                        <view class="search-right">{{ item.name }}</view>
                    </view>
                </block>
            </view>

            <view class="search-content" v-if="typeIndex == 1">
                <block v-for="(item, index) in searchLIst" :key="index">
                    <view @click="goToTopic(item)" class="search-item">
                        <view class="search-left"
                            ><u--image width="80rpx" height="80rpx" :src="item.picAbsolute" mode=""></u--image
                        ></view>
                        <view class="search-right">
                            <view class="search-title">{{ item.name }}</view>
                            <view class="search-bifo">{{ item.follows }} 人参与· {{ item.trends }}条讨论</view></view
                        >
                    </view>
                </block>
            </view>

            <view class="search-content" v-if="typeIndex == 2">
                <block v-for="(item, index) in searchLIst" :key="index">
                    <view @click="goToDynamic(item)" class="article-main">
                        <view class="search-article">
                            <view @click="goToHomePageId(item.userId)" class="article-left">
                                <view class="article-avatar"
                                    ><u-image width="80rpx" height="80rpx" :src="item.avatar" shape="circle"></u-image>
                                </view>
                                <view class="article-title1"
                                    ><view>{{ item.userName }}</view
                                    ><view class="article-time"
                                        >{{ request.getDateTimeFormat(item.publishTime) }} <text>发布了</text></view
                                    ></view
                                >
                            </view>
                            <view v-if="userInfo.uid != item.userId">
                                <view class="search-right1" v-if="item.followStatus == 0" @click.stop="goCollect(item)"
                                    ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png" mode=""></image>关注</view
                                >
                                <view class="search-right2" v-else @click.stop="goCollect(item)">已关注</view>
                            </view>
                        </view>
                        <view class="articleTitle">{{ item.title }}</view>
                        <view class="articleContent">{{ item.experience }}</view>
                        <view style="position: relative" class="articleImg">
                            <block v-for="(items, indexs) in item.picList.slice(0, 3)" :key="indexs">
                                <image @click.stop="showImagePrevie(indexs, item)" :src="items" mode=""></image>
                            </block>
                            <label
                                v-if="item.picList.length > 3"
                                style="
                                    border-top-left-radius: 10rpx;
                                    border-bottom-right-radius: 24rpx;
                                    line-height: 48rpx;
                                    width: 48rpx;
                                    height: 48rpx;
                                    text-align: center;
                                    font-size: 22rpx;
                                    color: #fff;
                                    background-color: rgba(0, 0, 0, 0.4);
                                    position: absolute;
                                    float: right;
                                    top: auto;
                                    bottom: 0;
                                    right: 10rpx;
                                "
                                >+{{ item.picList.length - 3 }}</label
                            >
                        </view>
                        <view class="articleBottom" style="justify-content: space-between">
                            <view
                                @click.stop="goToSigleTopic(item.topicId)"
                                v-if="item.topicId"
                                class="articleBottom-left"
                            >
                                <view class="text">#</view>
                                <view class="one_line">{{ item.topicName }}</view>
                            </view>
                            <view v-else style="height: 34rpx; width: 34rpx"></view>
                            <view class="articleBottom-right">
                                <view class="article-message"
                                    ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_comment.png" mode=""></image
                                    ><text>{{ item.comments }}</text></view
                                >
                                <view class="article-message" @click.stop="doTrends(item)">
                                    <image
                                        v-if="item.thumbsStatus == 0"
                                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"
                                        mode=""
                                    ></image>
                                    <image
                                        v-if="item.thumbsStatus == 1"
                                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good_sel.png"
                                        mode=""
                                    ></image>
                                    <text v-if="item.thumbsStatus == 0">{{ item.thumbs }}</text>
                                    <text v-if="item.thumbsStatus == 1" style="color: #ff6f89">{{ item.thumbs }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <view class="search-content" v-if="typeIndex == 3">
                <block v-for="(item, index) in searchLIst" :key="index">
                    <view @click="goToHomePage(item)" class="search-item1">
                        <view class="search-left">
                            <view class="search-avatar"
                                ><u-image
                                    width="56rpx"
                                    height="56rpx"
                                    :src="item.avatarAbsolute"
                                    shape="circle"
                                ></u-image>
                            </view>
                            <view class="search-title1">{{ item.nickname || item.name }}</view>
                        </view>
                        <view v-if="item.uid != userInfo.uid">
                            <view class="search-right1" v-if="item.followStatus == 0" @click.stop="goCollect(item)"
                                ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png" mode=""></image>关注</view
                            >
                            <view class="search-right2" v-else @click.stop="goCollect(item)">已关注</view>
                        </view>
                    </view>
                </block>
            </view>

            <u-loadmore
                v-if="more"
                :status="status"
                loadingText="加载中"
                loadmoreText="上拉加载更多"
                nomoreText="已经到底啦～"
                fontSize="28"
                iconSize="30"
                marginTop="20"
                marginBottom="30"
            ></u-loadmore>
            <view
                v-if="mallfalse && isloading == false"
                style="display: flex; flex-direction: column; align-items: center; width: 100%"
            >
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search_null_icon.png" style="width: 316rpx; height: 316rpx"></image>
                <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx">未搜索到相关数据</label>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    data() {
        return {
            typeIndex: 0,
            empty: false,
            searchLIst: [],
            searchType: 0,
            pageNum: 1,
            pageSize: 8,
            isloading: false,
            total: 0,
            key: '',
            Trendstatus: 0,
            status: 'loadmore',
            more: false,
            mallfalse: false,
            orderBy: 'top desc,topTime desc,publishTime desc',
        };
    },
    onShow() {
        // this.init();
    },
    onPullDownRefresh() {
        // this.searchLIst=[]
        this.init();
    },

    computed: {
        ...mapState(['isLogin', 'userInfo']),
    },

    methods: {
        ...mapMutations(['loginSaveUserInfo', 'logout']),
        init() {
            if (this.typeIndex == 0) {
                this.gofood(true, this.key);
            } else if (this.typeIndex == 1) {
                this.gotopic(true, this.key);
            } else if (this.typeIndex == 2) {
                this.gotrends(true, this.key);
            } else if (this.typeIndex == 3) {
                this.gouser(true, this.key);
            }
        },
        reachBottom() {
            if (this.more == false) return;
            this.status = 'loading';
            this.pageNum = ++this.pageNum;
            if (this.typeIndex == 0) {
                this.gofood(false, this.key);
            } else if (this.typeIndex == 1) {
                this.gotopic(false, this.key);
            } else if (this.typeIndex == 2) {
                this.gotrends(false, this.key);
            } else if (this.typeIndex == 3) {
                this.gouser(false, this.key);
            }
        },
        imgUrl() {
            return this.request.appImageBaseUrl;
        },
        showImagePrevie(index, item) {
            uni.previewImage({
                urls: item.picList,
                current: index,
            });
        },
        goToSigleTopic(id) {
            uni.navigateTo({
                url: `/pages/community/topicDetail/topicDetail?id=${id}`,
            });
        },
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, 'POST', true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loginSaveUserInfo(res.data);
                    }
                });
        },
        authUserInfo() {
            uni.getUserProfile({
                desc: 'Wexin',
                success: (res) => {
                    let avatar = res.userInfo.avatarUrl;
                    let nickname = res.userInfo.nickName;
                    this.sendUserInfo(avatar, nickname);
                },
            });
        },
        sendUserInfo(avatar, nickname) {
            var postData = {};
            postData.uid = this.userInfo.uid;
            postData.avatar = avatar;
            postData.nickname = nickname;
            this.request.httpTokenJsonRequest('/mp-api/wx/user/update', postData, 'POST', false).then((res) => {
                if (res.code == 0) {
                    this.requestUser();
                }
            });
        },
        goToHomePageId(userId) {
            if (this.userInfo.nickname == '' || this.userInfo.nickname == null) {
                this.authUserInfo();
                return;
            }
            uni.navigateTo({
                url: `/packageMine/pages/homepage/homepage?userId=${userId}`,
            });
        },
        goToHomePage(item) {
            if (this.userInfo.nickname == '' || this.userInfo.nickname == null) {
                this.authUserInfo();
                return;
            }
            uni.navigateTo({
                url: `/packageMine/pages/homepage/homepage?userId=${item.uid}`,
            });
        },
        goToDynamic(item) {
            if (this.userInfo.nickname == '' || this.userInfo.nickname == null) {
                this.authUserInfo();
                return;
            }
            uni.navigateTo({
                url: `/pages/community/dynamicDetail/dynamicDetail?id=${item.id}`,
            });
        },
        goToFoodDetail(item) {
            uni.navigateTo({
                url: `/packageHome/pages/redblack/detail?id=${item.id}`,
            });
        },
        goToTopic(item) {
            if (this.userInfo.nickname == '' || this.userInfo.nickname == null) {
                this.authUserInfo();
                return;
            }
            uni.navigateTo({
                url: `/pages/community/topicDetail/topicDetail?id=${item.id}`,
            });
        },
        gofood(isFresh, keyword) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
                this.isloading = true;
            }
            uni.showLoading({ mask: true });
            this.request
                .httpTokenRequest(
                    '/mp-api/wx/home/search/food',
                    {
                        orderByColumn: 'orderNum',
                        isAsc: 'descending',
                        content: keyword,
                        type: 0,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    },
                    'POST',
                    true,
                )
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    this.isloading = false;
                    if (res.code == 0) {
                        if (res.data.list && isFresh) {
                            this.searchLIst = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.searchLIst.push(item);
                            });
                        }
                        if (this.searchLIst.length <= 0) {
                            this.mallfalse = true;
                        } else {
                            this.mallfalse = false;
                        }
                        if (res.data.total > this.searchLIst.length) {
                            this.status = 'loadmore';
                            this.more = true;
                        } else {
                            this.more = false;
                            this.status = 'nomore';
                        }
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                });
        },
        gotopic(isFresh, keyword) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
                this.isloading = true;
            }
            uni.showLoading({ mask: true });
            this.request
                .httpTokenRequest(
                    '/mp-api/wx/home/search/topic',
                    {
                        orderByColumn: 'orderNum',
                        isAsc: 'descending',
                        content: keyword,
                        type: 1,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    },
                    'POST',
                    true,
                )
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    this.isloading = false;
                    if (res.code == 0) {
                        if (res.data.list && isFresh) {
                            this.searchLIst = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.searchLIst.push(item);
                            });
                        }
                        if (this.searchLIst.length <= 0) {
                            this.mallfalse = true;
                        } else {
                            this.mallfalse = false;
                        }
                        if (res.data.total > this.searchLIst.length) {
                            this.status = 'loadmore';
                            this.more = true;
                        } else {
                            this.more = false;
                            this.status = 'nomore';
                        }
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                });
        },
        gotrends(isFresh, keyword) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
                this.isloading = true;
            }
            uni.showLoading({ mask: true });
            this.request
                .httpTokenRequest(
                    '/mp-api/wx/home/search/trends',
                    { content: keyword, type: 2, pageNum: this.pageNum, pageSize: this.pageSize },
                    'POST',
                    true,
                )
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    this.isloading = false;
                    if (res.code == 0) {
                        if (res.data.list && isFresh) {
                            this.searchLIst = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.searchLIst.push(item);
                            });
                        }
                        if (this.searchLIst.length <= 0) {
                            this.mallfalse = true;
                        } else {
                            this.mallfalse = false;
                        }
                        if (res.data.total > this.searchLIst.length) {
                            this.status = 'loadmore';
                            this.more = true;
                        } else {
                            this.more = false;
                            this.status = 'nomore';
                        }
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                });
        },
        gouser(isFresh, keyword) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
                this.isloading = true;
            }
            uni.showLoading({ mask: true });
            this.request
                .httpTokenRequest(
                    '/mp-api/wx/home/search/user',
                    {
                        content: keyword,
                        type: 3,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        isAsc: 'descending',
                        orderByColumn: 'registerTime',
                    },
                    'POST',
                    true,
                )
                .then((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    this.isloading = false;
                    if (res.code == 0) {
                        if (res.data.list && isFresh) {
                            this.searchLIst = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.searchLIst.push(item);
                            });
                        }
                        if (this.searchLIst.length <= 0) {
                            this.mallfalse = true;
                        } else {
                            this.mallfalse = false;
                        }
                        if (res.data.total > this.searchLIst.length) {
                            this.status = 'loadmore';
                            this.more = true;
                        } else {
                            this.more = false;
                            this.status = 'nomore';
                        }
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                });
        },
        menu(e) {
            this.typeIndex = e;
            this.searchLIst = [];
            this.pageNum = 1;
            this.pageSize = 20;
            if (this.key) {
                if (this.typeIndex == 0) {
                    this.gofood(true, this.key);
                } else if (this.typeIndex == 1) {
                    this.gotopic(true, this.key);
                } else if (this.typeIndex == 2) {
                    this.gotrends(true, this.key);
                } else if (this.typeIndex == 3) {
                    this.gouser(true, this.key);
                }
            } else {
                this.searchLIst = [];
                this.mallfalse = false;
            }
        },
        searchEvent(e) {
            this.key = e;
            this.searchLIst = [];
            this.pageNum = 1;
            this.pageSize = 20;
            if (e) {
                if (this.typeIndex == 0) {
                    this.gofood(true, e);
                } else if (this.typeIndex == 1) {
                    this.gotopic(true, e);
                } else if (this.typeIndex == 2) {
                    this.gotrends(true, e);
                } else if (this.typeIndex == 3) {
                    this.gouser(true, e);
                }
            } else {
                this.searchLIst = [];
                this.mallfalse = false;
            }
        },
        goCollect(item) {
            if (this.userInfo.nickname == '' || this.userInfo.nickname == null) {
                this.authUserInfo();
                return;
            }
            let form = {
                id: item.userId || item.uid,
                followStatus: 1,
            };
            if (item.followStatus == 0) {
                form.followStatus = 1;
                this.request.httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        this.helper.showToast(res.message);
                    } else {
                        this.searchLIst.forEach((dynamicI) => {
                            if (dynamicI.uid == item.uid || dynamicI.uid == item.userId) {
                                dynamicI.followStatus = 1;
                            }
                        });
                    }
                });
            } else {
                uni.showModal({
                    cancelText: '取消',
                    confirmText: '确定',
                    title: '是否确定取消关注此用户？',
                    success: (res) => {
                        if (res.confirm) {
                            form.followStatus = 0;
                            this.request
                                .httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true)
                                .then((res) => {
                                    if (res.code != 0) {
                                        this.helper.showToast(res.message);
                                    } else {
                                        this.searchLIst.forEach((dynamicI) => {
                                            if (dynamicI.uid == item.uid || dynamicI.uid == item.userId) {
                                                dynamicI.followStatus = 0;
                                            }
                                        });
                                    }
                                });
                        }
                    },
                });
            }
        },
        doTrends(item) {
            if (this.userInfo.nickname == '' || this.userInfo.nickname == null) {
                this.authUserInfo();
                return;
            }
            var form = {
                id: item.id,
                thumbsStatus: 1,
            };
            if (item.thumbsStatus == 0) {
                form.thumbsStatus = 1;
                this.request.httpTokenJsonRequest('/mp-api/wx/trends/thumbs', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        this.helper.showToast(res.message);
                    } else {
                        item.thumbsStatus = 1;
                        item.thumbs = item.thumbs + 1;
                    }
                });
            } else {
                form.thumbsStatus = 0;
                this.request.httpTokenJsonRequest('/mp-api/wx/trends/thumbs', form, 'POST', true).then((res) => {
                    if (res.code != 0) {
                        this.helper.showToast(res.message);
                    } else {
                        item.thumbsStatus = 0;
                        if (item.thumbs > 0) {
                            item.thumbs = item.thumbs - 1;
                        }
                    }
                });
            }
        },
    },
};
</script>

<style>
body {
    background-image: url(https://smosun.ro-moo.com/profile/upload/ximusen_mini_app_img/search_top_back.png);
    background-size: 100% 300px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-position: top;
}
body,
.search {
    height: 100%;
    min-height: 100vh;
}
.search {
    display: flex;
    flex-direction: column;
}
.search-nav {
    position: sticky;
    top: 0;
    left: 0;
}
.search-scroll {
    flex: 1;
    overflow: hidden;
}
.search-content {
    width: 92%;
    padding-top: 10px;
    padding-bottom: 30px;
    margin: 0 auto;
}
.background-top {
    width: 100%;
    min-height: 200px;
}
.content {
    top: 0;
    left: 0;
    width: 100%;
}
uni-page-body,
html {
    height: 100%;
}
.search_top_back {
    background-size: 100% 600rpx;
    width: 100%;
    background-repeat: no-repeat;
    height: 574rpx;
}
.one_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    flex: 1;
}
.article-main {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.articleBottom-left {
    border: 1rpx solid #ccc;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    line-height: 34rpx;
    font-weight: 400;
    height: 46rpx;
    padding-right: 12rpx;
    flex-direction: row;
}
.articleBottom-left .text {
    background-color: #ff822e;
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    margin: 0 6rpx;
    border-radius: 50%;
    width: 34rpx;
    height: 34rpx;
    margin-right: 6rpx;
}
.articleBottom-right {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
